<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main.tpl.homePage"><i class="fa fa-home"></i> 首页</a></li>
        <li><a ui-sref="main.biz.launchplan.planList">推广计划</a></li>
        <li><a ng-click="backto()">{{planName}}详情</a></li>
        <li class="active" >{{planName}}策略详情</li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="wrapper-md content">
    <div class="panel panel-default">
        <!-- 头部 -->
        <div class="panel-heading font-bold">{{planName}}策略详情
            <a class="btn btn-sm btn-icon btn-rounded btn-default pull-right m-t-n-xs" ng-click="backto()"><i class="text-md fa fa-times text-muted"></i></a>
        </div>

        <!--表单-->
        <div class="panel-body">
            <div class="content-body">
                <div class="baseInfo">
                    <div class="baseTitle textTitle">基本信息</div>
                    <div class="inputWrap">
                        <div class="adType clear">
                            <label class="explain">投放时段</label>
                            <label class="radio ">
                                <input type="radio" checked="checked" name="time" value="0" ng-model="resuleObj.time" data-toggle="radio" class="custom-radio">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                不限
                            </label>
                            <label class="radio ">
                                <input type="radio" name="time" value="1" data-toggle="radio" ng-model="resuleObj.time" class="custom-radio" ng-click="openLayer()">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                自定义
                            </label>
                            <span class="showCounts" ng-show="resuleObj.time==='1'">已选择
                        <span class="blueFont">{{showtime.Monday.length+showtime.Tuesday.length+showtime.Wednesday.length+showtime.Thursday.length+showtime.Friday.length+showtime.Saturday.length+showtime.Sunday.length}}</span>个时间段</span>
                            <div class="timeContain" ng-show="resuleObj.time==='1'">
                                <div class="day" ng-show="showtime.Monday.length>0">
                                    <span class="whichDay">星期一 </span>
                                    <span ng-repeat="Monday in showtime.Monday">{{Monday.start}}:00~{{Monday.end}}:59
                                <span ng-show="$index<showtime.Monday.length-1">、</span>
                            </span>
                                </div>
                                <div class="day" ng-show="showtime.Tuesday.length>0">
                                    <span class="whichDay">星期二 </span>
                                    <span ng-repeat="Tuesday in showtime.Tuesday">{{Tuesday.start}}:00~{{Tuesday.end}}:59
                                <span ng-show="$index<showtime.Tuesday.length-1">、</span>
                            </span>
                                </div>
                                <div class="day" ng-show="showtime.Wednesday.length>0">
                                    <span class="whichDay">星期三 </span>
                                    <span ng-repeat="Wednesday in showtime.Wednesday">{{Wednesday.start}}:00~{{Wednesday.end}}:59
                                <span ng-show="$index<showtime.Wednesday.length-1">、</span>
                            </span>
                                </div>
                                <div class="day" ng-show="showtime.Thursday.length>0">
                                    <span class="whichDay">星期四 </span>
                                    <span ng-repeat="Thursday in showtime.Thursday">{{Thursday.start}}:00~{{Thursday.end}}:59
                                <span ng-show="$index<showtime.Thursday.length-1">、</span>
                            </span>
                                </div>
                                <div class="day" ng-show="showtime.Friday.length>0">
                                    <span class="whichDay">星期五 </span>
                                    <span ng-repeat="Friday in showtime.Friday">{{Friday.start}}:00~{{Friday.end}}:59
                                <span ng-show="$index<showtime.Friday.length-1">、</span>
                            </span>
                                </div>
                                <div class="day" ng-show="showtime.Saturday.length>0">
                                    <span class="whichDay">星期六 </span>
                                    <span ng-repeat="Saturday in showtime.Saturday">{{Saturday.start}}:00~{{Saturday.end}}:59
                                <span ng-show="$index<showtime.Saturday.length-1">、</span>
                            </span>
                                </div>
                                <div class="day" ng-show="showtime.Sunday.length>0">
                                    <span class="whichDay">星期日 </span>
                                    <span ng-repeat="Sunday in showtime.Sunday">{{Sunday.start}}:00~{{Sunday.end}}:59
                                <span ng-show="$index<showtime.Sunday.length-1">、</span>
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="direction">
                    <div class="directionTitle textTitle">哪些人能看到我的广告</div>
                    <div class="inputWrap">
                        <div class="adType clear">
                            <label class="explain">场景流量包定向</label>
                            <label class="radio ">
                                <input type="radio" checked="checked" name="package" value="0" ng-model="resuleObj.package" data-toggle="radio" class="custom-radio">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                不限
                            </label>
                            <label class="radio ">
                                <input type="radio" name="package" value="1" data-toggle="radio" ng-model="resuleObj.package" class="custom-radio" ng-click='showPage()'>
                                <span class="icons" ng-click="showPackageWindow=true" ng-init="showPackageWindow=false">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                选择场景流量包
                            </label>
                            <span class="showCounts" ng-show="resuleObj.package==='1'">已选择
                        <span class="blueFont">{{showAdsList&&showAdsList.length!=0?showAdsList.length:'0'}}</span>个广告位</span>
                        </div>
                    </div>
                    <div class="remind">*指定流量包为了保障曝光转化的最大效果，建议选择不限</div>
                    <!-- 以下为行业定向，本期因智子云那边原因，暂时不用 。勿删-->
                    <!-- <div class="inputWrap" >
                      <div class="adType clear">
                        <label class="explain">行业定向</label>
                        <label class="radio ">
                          <input type="radio" checked="checked" name="industry"  value="1" ng-model="resuleObj.industry"  data-toggle="radio" class="custom-radio">
                          <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                          </span>
                          不限
                        </label>
                        <label class="radio ">
                          <input type="radio" name="industry" value="2" data-toggle="radio" ng-model="resuleObj.industry" class="custom-radio" ng-click="ifShowIndustryLayer()">
                          <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                          </span>
                          选择行业
                        </label>
                        <span class="showCounts" ng-show="resuleObj.industry==='2'">已选择<span class="blueFont">7</span>个行业</span>
                      </div>
                    </div> -->
                    <div class="inputWrap">
                        <div class="adType clear">
                            <label class="explain">地域定向</label>
                            <label class="radio ">
                                <input type="radio" checked="checked" name="area" value="0" ng-model="resuleObj.area" data-toggle="radio" class="custom-radio">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                不限
                            </label>
                            <label class="radio" ng-click='showAdminiDivision=true'>
                                <input type="radio" name="area" value="1" data-toggle="radio" ng-model="resuleObj.area" class="custom-radio">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                行政区域
                            </label>
                            <label class="radio ">
                                <input type="radio" name="area" value="2" data-toggle="radio" ng-model="resuleObj.area" class="custom-radio">
                                <span class="icons" ng-click="showCommercialArea=true" ng-init="showCommercialArea=false">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                商圈
                            </label>
                            <span class="showCounts" ng-show="resuleObj.area==='1'">已选择
                        <span class="blueFont">{{selectedPlace.length}}</span>个区域</span>
                            <span class="showCounts" ng-show="resuleObj.area==='2'">已选择
                        <span class="blueFont">{{circleList.length+tradingArea.length}}</span>个商圈</span>
                        </div>
                    </div>
                    <div class="inputWrap">
                        <div class="adType clear">
                            <label class="explain">IP定向</label>
                            {{ipListBox}}
                            <label class="radio ">
                                <input type="radio" checked="checked" name="IPlist" value="0" ng-model="resuleObj.IPlist" data-toggle="radio" class="custom-radio">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                不限
                            </label>
                            <label class="radio ">
                                <input type="radio" name="IPlist" value="1" data-toggle="radio" ng-model="resuleObj.IPlist" class="custom-radio" ng-click="chooseWhiteIpList()">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                白名单IP
                            </label>
                            <label class="radio ">
                                <input type="radio" name="IPlist" value="2" data-toggle="radio" ng-model="resuleObj.IPlist" class="custom-radio" ng-click="chooseBlackIpList()">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                黑名单IP
                            </label>
                            <span class="showCounts" ng-show="resuleObj.IPlist==='1'">已选择<span class="blueFont cursor" ng-click="chooseWhiteIpList()" >{{whiteList.split('\n')==''?0:whiteList.split('\n').length}}</span>个IP</span>
                            <span class="showCounts" ng-show="resuleObj.IPlist==='2'">已选择<span class="blueFont cursor" ng-click="chooseBlackIpList()" >{{blackList.split('\n')==''?0:blackList.split('\n').length}}</span>个IP</span>
                        </div>
                    </div>
                    <div class="inputWrap" >
                        <div class="openDate clear">
                            <label class="explain fl">移动运营商定向</label>
                            <div class="checkBoxContain fl clear">
                                <div class="fCheckBox noSelect fl" ng-repeat="item in checkboxListOperator">
                                    <input type="checkbox" id="{{item.id}}" ng-model='item.ifchosed' ng-click="choseOperator(item)">
                                    <label class="" for="{{item.id}}">
                                        {{item.name}}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="inputWrap" >
                        <div class="openDate clear">
                            <label class="explain fl">移动投放设备定向</label>
                            <div class="checkBoxContain fl clear">
                                <div class="fCheckBox noSelect fl" ng-repeat="item in checkboxListMachine">
                                    <input type="checkbox" id="{{item.id}}" ng-disabled="resuleObj.allLine" ng-model='item.ifchosed' ng-click="choseMachine(item)">
                                    <label class="" for="{{item.id}}">
                                        {{item.name}}
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="inputWrap" >
                        <div class="openDate clear">
                            <label class="explain fl">移动联网方式定向</label>
                            <div class="checkBoxContain fl clear">
                                <div class="fCheckBox noSelect fl" ng-repeat="item in checkboxListLine">
                                    <input type="checkbox" id="{{item.id}}" ng-disabled="resuleObj.allLine" ng-model='item.ifchosed' ng-click="choseLines(item)">
                                    <label class="" for="{{item.id}}">
                                        {{item.name}}
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="inputWrap">
                        <div class="adType clear">
                            <label class="explain">人群定向</label>
                            <label class="radio ">
                                <input type="radio" checked="checked" name="group" value="0" ng-model="resuleObj.group" data-toggle="radio" class="custom-radio">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                不限
                            </label>
                            <label class="radio ">
                                <input type="radio" name="group" value="1" data-toggle="radio" ng-model="resuleObj.group" class="custom-radio" ng-click="ifShowGroupLayer()">
                                <span class="icons">
                            <span class="icon-unchecked"></span>
                            <span class="icon-checked"></span>
                        </span>
                                兴趣人群
                            </label>
                            <span class="showCounts" ng-show="resuleObj.group==='1'">已选择
                        <span class="blueFont">{{chosedList.length}}</span>个兴趣人群</span>
                        </div>
                    </div>
                </div>
                <div class="control">
                    <div class="controlTitle textTitle">预算&频次控制</div>
                    <div class="inputWrap">
                        <label class="inputExplain">该策略每日投放预算</label>
                        <div class="fCheckBox noSelect">
                            <input type="checkbox" id="everydayMoney" ng-model='resuleObj.everydayMoney' ng-click="clearData()">
                            <label class="" for="everydayMoney">
                                不限
                            </label>
                        </div>
                        <input type="text" class="txt-normal selfInput" id="adName" name='adName' ng-model="resuleObj.everydayMoneyInput" placeholder=""
                               ng-blur='checkeverydayMoneyInput()' ng-disabled="resuleObj.everydayMoney===true" maxlength="30" />
                        <span> 元 </span>

                    </div>
                    <div class="inputWrap">
                        <label class="inputExplain">该策略总投放预算</label>
                        <div class="fCheckBox noSelect">
                            <input type="checkbox" id="allMoney" ng-model='resuleObj.allMoney' ng-click="clearData()">
                            <label class="" for="allMoney">
                                不限
                            </label>
                        </div>
                        <input type="text" class="txt-normal selfInput" id="adName" name='adName' ng-model="resuleObj.allMoneyInput" placeholder=""
                               ng-blur='checkallMoneyInput()' ng-disabled="resuleObj.allMoney===true" maxlength="30" />
                        <span> 元 </span>
                    </div>
                    <div class="inputWrap">
                        <label class="inputExplain">该策略总曝光数上限</label>
                        <div class="fCheckBox noSelect">
                            <input type="checkbox" id="allPublic" ng-model='resuleObj.allPublic' ng-click="clearData()">
                            <label class="" for="allPublic">
                                不限
                            </label>
                        </div>
                        <input type="text" class="txt-normal selfInput" id="adName" name='adName' ng-model="resuleObj.allPublicInput" placeholder=""
                               ng-blur='checkallPublicInput()' ng-disabled="resuleObj.allPublic===true" maxlength="30" />
                        <span>次</span>
                    </div>
                    <div class="inputWrap">
                        <label class="inputExplain">该策略总点击数上限</label>
                        <div class="fCheckBox noSelect">
                            <input type="checkbox" id="allClick" ng-model='resuleObj.allClick' ng-click="clearData()">
                            <label class="" for="allClick">
                                不限
                            </label>
                        </div>
                        <input type="text" class="txt-normal selfInput" id="adName" name='adName' ng-model="resuleObj.allClickInput" placeholder=""
                               ng-blur='checkallClickInput()' ng-disabled="resuleObj.allClick===true" maxlength="30" />
                        <span>次</span>
                    </div>
                    <div class="inputWrap">
                        <label class="inputExplain">每个受众每日投放频次</label>
                        <div class="fCheckBox noSelect">
                            <input type="checkbox" id="dayCount" ng-model='resuleObj.dayCount' ng-click="clearData()">
                            <label class="" for="dayCount">
                                不限
                            </label>
                        </div>
                        <input type="text" class="txt-normal selfInput" id="adName" name='adName' ng-model="resuleObj.dayCountInput" placeholder=""
                               ng-blur='checkdayCountInput()' ng-disabled="resuleObj.dayCount===true" maxlength="30" />
                        <span>次</span>
                    </div>
                    <div class="inputWrap">
                        <label class="inputExplain">每个受众每小时投放频次</label>
                        <div class="fCheckBox noSelect">
                            <input type="checkbox" id="hourCount" ng-model='resuleObj.hourCount' ng-click="clearData()">
                            <label class="" for="hourCount">
                                不限
                            </label>
                        </div>
                        <input type="text" class="txt-normal selfInput" id="adName" name='adName' ng-model="resuleObj.hourCountInput" placeholder=""
                               ng-blur='checkhourCountInput()' ng-disabled="resuleObj.hourCount===true" maxlength="30" />
                        <span>次</span>
                    </div>
                </div>
                <div class="button btns">
                    <div class="col-md-1">
                        <label class="col-sm-1 control-label"><button class="ifc-btn btn-primary" ng-click="backto()" type="submit">返 回</button></label>
                    </div>
                    <!--<div class="col-md-1">-->
                        <!--<label class="col-sm-1 control-label"><button class="ifc-btn btn-primary" ng-click="save()" type="submit">保 存</button></label>-->
                    <!--</div>-->
                </div>
            </div>
            <div class="Layer cover timeLayer" ng-show="showTimeLayer">
                <choose-time></choose-time>
            </div>
            <!-- 以下为兴趣人群的弹框 -->
            <div class="Layer cover groupLayer" ng-show="showGroupLayer">
                <choose-group></choose-group>
            </div>
            <!-- 以下为IP定向的弹框 -->
            <div class="Layer cover" ng-show="ipListBox">
                <choose-ip></choose-ip>
            </div>
            <!--商圈选择-->
            <div class="cover" ng-if="showCommercialArea">
                <commercial-area class="showSelfSetting" show-commercial="$parent.showCommercialArea" trading-area="$parent.tradingArea"
                                 trading-area-types="$parent.tradingAreaTypes" circle-list="$parent.circleList" is-empty='isEmpty(a)'></commercial-area>
            </div>
            <!-- 流量场景包弹框 -->
            <div class='cover' ng-if='showPackageWindow'>
                <choose-media ads-list='$parent.showAdsList' show-package='$parent.showPackageWindow' checked-pack-num='$parent.checkedPack'
                              is-show-ads-list-empty='$parent.isShowAdsListEmpty(showAdsList)'></choose-media>
            </div>
            <!--行政区域-->
            <div ng-if="showAdminiDivision">
                <admini-division show-division="$parent.showAdminiDivision" selected-place='$parent.selectedPlace' is-empty='isEmpty(a)'></admini-division>
            </div>
        </div>
    </div>


</div>

<style>
    *{
        padding:0;
        margin:0;
    }
    .checkbox, .radio {
        display: inline-block;
    }
    .content-body {
        width: 100%;
        padding-left: 40px;
        background-color: white;
    }

    .pageTitle {
        font-size: 24px;
        color: #393d40;
        margin: 30px 0px;
    }

    .textTitle {
        margin-top: 50px;
        margin-bottom: 20px;
        font-size: 18px;
        color: #393d40;
        position: relative;
        padding-left: 10px;
    }

    .textTitle:before {
        content: '';
        height: 20px;
        width: 4px;
        background: #ffb135;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -10px;
    }

    .baseInfo .inputWrap,
    .direction .inputWrap {
        font-size: 0;
    }

    .explain {
        width: 180px;
        font-size: 16px;
        color: #393d40;
    }

    .radio {
        width: 180px;
        font-size: 16px;
        color: #393d40;
    }

    .fCheckBox label {
        cursor: pointer;
    }

    .showCounts {
        font-size: 16px;
        color: #393d40;
    }

    .showCounts .blueFont {
        color: #3a98fc;
    }

    .remind {
        font-size: 16px;
        color: #b3b3b3;
    }

    .checkBoxContain {
        width: 82%;
    }

    .openDate .fCheckBox {
        margin-bottom: 20px;
    }

    .baseInfo .fCheckBox,
    .direction .fCheckBox {
        width: 180px;

    }

    .baseInfo .fCheckBox label,
    .direction .fCheckBox label {
        padding-left: 32px!important;
    }

    /* 预算控制内样式 */

    .inputExplain {
        width: 180px;
        margin-right: 50px;
    }

    .control .fCheckBox {
        width: 140px;
    }

    .control .selfInput {
        width: 374px;
        font-size: 16px;
        color: #b3b3b3;
        margin-top: -10px;
    }

    .control .inputWrap span {
        font-size: 16px;
        margin-left: 10px;
    }

    .btns {
        margin-left: 0px;
        margin-top: 60px;
    }

    .btns .back {
        border: 1px solid #ffb135;
        background-color: #ffffff;
        color: #ffb135;
    }

    /* 自定义时间显示 */

    .timeContain {
        margin-left: 540px;
        font-size: 16px;
        color: #ff7070;
    }

    .timeContain .day {
        margin-bottom: 20px;
    }

    .whichDay {
        margin-right: 10px;
    }
    .outHide{
        overflow:hidden;
    }
    .MR40{
        margin-right: 40px;
    }
    .PT5{
        padding-top: 5px;
    }
    .text-title {
        width: 27%;
        font-size: 16px;
        color: #ffb135;
        padding: 15px 0 15px 15px;
        letter-spacing: 1;
        position: relative;
        display: inline-block;
    }
    .font14{
        font-size: 14px;
    }
    .MR15{
        margin-right: 15px;
    }
    span{
        display: inline-block;
    }
</style>